<template>
	<div class="nav-bar">
		<router-link
			:class="`nav ${index === activeNav ? 'active' : ''}`"
			v-for="(nav,index) in navs"
			:key="nav.icon"
			:to="{'name': nav.toname}"
		>
			<i
				:class="`iconfont ${nav.icon}`"
			/>
			<span>{{nav.text}}</span>
		</router-link>
	</div>
</template>

<script>
export default {
  name: 'nav-bar',
  data() {
    return {
      navs: [
        { text: '主页', icon: 'icon-home', toname: 'Home' },
        { text: '专利预测', icon: 'icon-forecast', toname: 'Forecast' },

      ],
      activeNav: 0
    }
  },
  watch: {
    '$route': {
      handler(route) {
        this.activeNav = this.navs.findIndex(item => item.toname === route.name)
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scope>
.nav-bar {
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100vw;
  height: $navHeight;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: $shadow1;

  .nav {
    padding: 5px 10px;
    margin-right: 15px;
    border: 1px solid transparent;
    border-radius: $radiusMiddle;

    &:hover {
      background-color: $blue01;
    }

    &.active {
      color: $blue;
      border-color: $blue;
    }

    .iconfont {
      margin-right: 2px;
    }
  }
}
</style>
